<template>
    <el-container v-loading="loading">
      <el-main>
        <el-table :data="table.data" class="sa-table" stripe>
          <template #empty>
            <sa-empty />
          </template>
          <el-table-column label="回放片段" min-width="140">
            <template #default="scope">
              <div class="sa-table-line-1">{{ '片段' + scope.row.index || '-' }}</div>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" min-width="140">
            <template #default="scope">
              <div class="sa-table-line-1">{{
                dayjs(scope.row.create_time).format('YYYY-MM-DD HH:mm:ss') || '-'
              }}</div>
            </template>
          </el-table-column>
          <el-table-column label="过期时间" min-width="140">
            <template #default="scope">
              <div class="sa-table-line-1">{{
                dayjs(scope.row.expire_time).format('YYYY-MM-DD HH:mm:ss') || '-'
              }}</div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scope">
              <el-button class="is-link" type="primary" @click="play(scope.row.media_url)"
                >播放</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- <sa-view-bar>
          <template #right>
            <sa-pagination :pageData="pageData" @updateFn="getData" />
          </template>
        </sa-view-bar> -->
      </el-main>
    </el-container>
  </template>
  <script setup>
    import { api } from '../../app.service';
    import { onMounted, reactive, ref } from 'vue';
    import dayjs from 'dayjs';
    import { usePagination } from '@/sheep/hooks';
    const props = defineProps({
      modal: {
        type: Object,
      },
    });
    // 表格状态
    const table = reactive({
      data: [],
      order: '',
      sort: '',
      selected: [],
    });
    const loading = ref(false);
    const { pageData } = usePagination();
    async function getData(id) {
      loading.value = true;
      const { error, data } = await api.mplive.playback(id, {
        page: pageData.page,
        list_rows: pageData.list_rows,
        order: table.order,
        sort: table.sort,
      });
      if (error === 0) {
        table.data = data;
        table.data.forEach((item, index) => {
          table.data[index].index = index + 1;
        });
      }
      loading.value = false;
    }
    function play(url) {
      window.open(url);
    }
  
    async function init() {
      if (props.modal.params.id) {
        await getData(props.modal.params.id);
      }
    }
  
    onMounted(() => {
      init();
    });
  </script>
  <style lang="scss" scoped>
    .program {
      width: 360px;
      height: 260px;
      background: #f5f5f5;
      border-radius: 4px;
    }
    .path {
      width: 360px;
      height: 260px;
      background: #f5f5f5;
      border-radius: 4px;
    }
    .title {
      font-size: 14px;
      line-height: 20px;
      color: var(--sa-subtitle);
    }
    .desc {
      color: var(--sa-subfont);
      font-size: 14px;
      line-height: 20px;
      word-break: break-all;
      word-wrap: break-word;
    }
  </style>
  